/* eslint-disable no-unused-vars */
import React, { memo } from "react";
import {
  useDraggable,
} from "@dnd-kit/core";
import IconFont from "@/components/IconFont";
import config from "@/layouts/config";

function DraggableControl({ type, name }) {
  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
    id: type,
    data: {
      type,
      fromSidebar: true,
    },
  });

  // 根据控件类型渲染不同的表单控件
  let control;
  switch (type) {
    case "input":
      control = (
        <div
          className="centerl"
          style={{ gap: 6, fontSize: 12, paddingLeft: 4 }}
        >
          <IconFont type="icon-danhangwenben"></IconFont>
          <span className="mt2">{config[type].deftitle}</span>
        </div>
      );
      break;
    case "digit":
      control = <input type="number" />;
      break;
    case "checkbox":
      control = <input type="checkbox" />;
      break;
    default:
      control = null;
  }

  return (
    <div
      ref={setNodeRef}
      {...attributes}
      {...listeners}
      style={{
        opacity: isDragging ? 0.5 : 1,
        cursor: "grab",
        padding: 6,
        height: 34,
        border: "1px solid #ccc",
        borderRadius: "4px",
        marginBottom: "8px",
      }}
    >
      {control}
    </div>
  );
}

export default memo(DraggableControl);
